<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"dttx123.gitee.io","root":"/blog/","scheme":"Gemini","version":"8.0.0-rc.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="Ajax  - 前后端的交互技术服务器的概念 前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器    服务器软件 使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。  常见的服务器软件： Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、 Node服务器等； web服务器即(web服">
<meta property="og:type" content="article">
<meta property="og:title" content="Ajax">
<meta property="og:url" content="http://dttx123.gitee.io/2018/03/03/Ajax/ajax/index.html">
<meta property="og:site_name" content="Starry Night">
<meta property="og:description" content="Ajax  - 前后端的交互技术服务器的概念 前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器    服务器软件 使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。  常见的服务器软件： Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、 Node服务器等； web服务器即(web服">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/server.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/client.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/cs.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/static.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/dong.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/dns.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/host.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/phpStudy.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/phpStudy02.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/iis.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/vc9.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/form.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/%E5%89%8D%E7%AB%AF%E8%A7%86%E9%A2%91/38%E6%9C%9F%E5%B0%B1%E4%B8%9A%E7%8F%AD/ajax/01/01-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/php.png">
<meta property="article:published_time" content="2018-03-02T16:00:00.000Z">
<meta property="article:modified_time" content="2020-05-13T03:33:54.031Z">
<meta property="article:author" content="大春哥">
<meta property="article:tag" content="网络编程">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://dttx123.gitee.io/blog/2018/03/03/Ajax/ajax/server.png">

<link rel="canonical" href="http://dttx123.gitee.io/2018/03/03/Ajax/ajax/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>Ajax | Starry Night</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line toggle-line-first"></span>
        <span class="toggle-line toggle-line-middle"></span>
        <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Starry Night</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">这就朕为你打下的江山</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/03/03/Ajax/ajax/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Ajax
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-03-03 00:00:00" itemprop="dateCreated datePublished" datetime="2018-03-03T00:00:00+08:00">2018-03-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 11:33:54" itemprop="dateModified" datetime="2020-05-13T11:33:54+08:00">2020-05-13</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="Ajax-前后端的交互技术"><a href="#Ajax-前后端的交互技术" class="headerlink" title="Ajax  - 前后端的交互技术"></a>Ajax  - 前后端的交互技术</h1><h1 id="服务器的概念"><a href="#服务器的概念" class="headerlink" title="服务器的概念"></a>服务器的概念</h1><blockquote>
<p>前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器 </p>
</blockquote>
<p><img src="/blog/2018/03/03/Ajax/ajax/server.png" alt></p>
<h2 id="服务器软件"><a href="#服务器软件" class="headerlink" title="服务器软件"></a>服务器软件</h2><blockquote>
<p>使计算机具备提供某种服务能力的应用软件，称为服务器软件，<br>通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。</p>
</blockquote>
<p>常见的服务器软件： <code>Apache服务器</code>、Nginx 服务器、IIS服务器、Tomcat服务器、 Node服务器等；</p>
<h2 id="web服务器"><a href="#web服务器" class="headerlink" title="web服务器"></a>web服务器</h2><p>即(web服务器)网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。</p>
<p>服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为<strong>服务端开发</strong>。 </p>
<p>常见后台开发的编程语言有： <code>php</code>、java、.net、Python、Ruby、Perl。</p>
<h1 id="客户端"><a href="#客户端" class="headerlink" title="客户端"></a>客户端</h1><blockquote>
<p>具有向服务器<strong>索取服务</strong>能力的终端，叫做客户端。</p>
</blockquote>
<ul>
<li>客户端：电脑、平板、手机安装了客户端软件，就可以称为客户端</li>
<li>客户端：安装客户端软件，<strong>索取服务</strong>的计算机</li>
<li>服务器：安装服务器软件，<strong>提供服务</strong>的计算机</li>
</ul>
<h2 id="客户端软件"><a href="#客户端软件" class="headerlink" title="客户端软件"></a>客户端软件</h2><p><img src="/blog/2018/03/03/Ajax/ajax/client.png" alt="test image size">{:width=”200px”}</p>
<p>对于前端工程师而言，主要接触到的客户端软件就是<strong>浏览器</strong>。</p>
<p>以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，通常称之为<strong>前端开发</strong>。</p>
<h2 id="服务器与客户端的关系"><a href="#服务器与客户端的关系" class="headerlink" title="服务器与客户端的关系"></a>服务器与客户端的关系</h2><p><img src="/blog/2018/03/03/Ajax/ajax/cs.png" alt></p>
<p>问题：我们写的html页面存放在哪里？</p>
<blockquote>
<p>在浏览器中展示的所有的资源， 都是存放在服务器中的， 当客户端向服务器发送请求后，服务器会将资源返回给浏览器进行渲染；</p>
</blockquote>
<h1 id="动态网页与静态网页"><a href="#动态网页与静态网页" class="headerlink" title="动态网页与静态网页"></a>动态网页与静态网页</h1><ul>
<li>静态网页：使用浏览器端语言进行编程，网站由静态代码（HTML.CSS,JS）组成。用户请求服务器上已经存在的页面，不需要进行业务逻辑的处理。 <img src="/blog/2018/03/03/Ajax/ajax/static.png" alt></li>
</ul>
<ul>
<li>动态网站 ：网页通过服务器的程序动态生成。用户可以和服务器进行交互（可以根据用户输入的不同信息，返回不同的运行结果），可以处理复杂的业务逻辑。<img src="/blog/2018/03/03/Ajax/ajax/dong.png" alt></li>
</ul>
<p><strong>总结</strong></p>
<pre><code>动态网站的 `动`指的是网站`数据的动` 而不是 `视觉上的动`;</code></pre><h1 id="网络基础"><a href="#网络基础" class="headerlink" title="网络基础"></a>网络基础</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//思考：我的电脑如何去 访问京东淘宝网页的？</span></span><br></pre></td></tr></table></figure>

<h2 id="ip地址"><a href="#ip地址" class="headerlink" title="ip地址"></a>ip地址</h2><p>所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每个人的身份证号码一样)</p>
<p>通过ip就可以找到具体的某一台计算机。</p>
<p>例 <code>192.168.1.110</code></p>
<p>弊端：没有规律，不方便记忆和推广</p>
<p>查看本机IP地址 <code>ping</code>、<code>ipconfig</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ping <span class="number">192.168</span><span class="number">.1</span><span class="number">.110</span>  <span class="comment">// 查看和某个同学的电脑是否连通</span></span><br></pre></td></tr></table></figure>

<p><strong>两种特殊的IP地址：</strong></p>
<p><strong>127.0.0.1</strong>作为本地测试的IP地址。本机测试时，客户端与服务器都安装在本地计算机上，数据无需任何网络传输。</p>
<p>192.168开头为局域网的地址。</p>
<h2 id="域名"><a href="#域名" class="headerlink" title="域名"></a>域名</h2><p>由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“好记的名字”</p>
<p>查看域名对应的IP地址 <code>ping</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ping jd.com  <span class="comment">//可以获取到京东的ip</span></span><br></pre></td></tr></table></figure>

<p><strong>特殊的域名</strong></p>
<p>​    <code>localhost</code>，意思为本地主机。这是一个保留域名，主要用于本地测试，对应IP地址为<code>127.0.0.1</code>。</p>
<h2 id="DNS服务器"><a href="#DNS服务器" class="headerlink" title="DNS服务器"></a>DNS服务器</h2><p>DNS（Domain Name System）因特网上作为域名和IP地址相互映射的一个分布式数据库， 能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。</p>
<p>简单的说就是用于记录IP地址和域名之间的对应关系。</p>
<p>查找优先级 本机hosts文件、DNS服务器</p>
<p>ipconfig /flushdns 刷新DNS</p>
<p><img src="/blog/2018/03/03/Ajax/ajax/dns.png" alt></p>
<p>问题： 在浏览器输入<a href="http://www.jd.com" target="_blank" rel="noopener">www.jd.com</a>  到 浏览器返回html页面的执行过程是什么样的？</p>
<h2 id="端口"><a href="#端口" class="headerlink" title="端口"></a>端口</h2><p>端口号是计算机与外界通讯交流的出入口，每个端口对应不同的服务。</p>
<p>现实生活中，银行不同的窗口办理不同的业务。</p>
<p>查看端口占用情况 netstat -an</p>
<p>常见端口号 80、3306、21  </p>
<h2 id="本地hosts"><a href="#本地hosts" class="headerlink" title="本地hosts"></a>本地hosts</h2><blockquote>
<p>Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会<strong>首先自动从Hosts文件中寻找对应的IP地址</strong>，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//hosts文件的地址：C:\Windows\System32\drivers\etc</span></span><br><span class="line"><span class="comment">//在浏览器中输入taobao.com的执行过程。</span></span><br></pre></td></tr></table></figure>

<p><img src="/blog/2018/03/03/Ajax/ajax/host.png" alt></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//hosts文件内容</span></span><br><span class="line"><span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span> localhost</span><br><span class="line"><span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span> localhost</span><br><span class="line"><span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>  study.com</span><br><span class="line"><span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>  www.study.com</span><br></pre></td></tr></table></figure>

<p>谈资</p>
<h1 id="搭建HTTP服务器"><a href="#搭建HTTP服务器" class="headerlink" title="搭建HTTP服务器"></a>搭建HTTP服务器</h1><h2 id="phpStudy介绍"><a href="#phpStudy介绍" class="headerlink" title="phpStudy介绍"></a>phpStudy介绍</h2><blockquote>
<p>phpStudy是一个PHP调试环境的程序集成包。<br>该程序包集成最新的Apache+PHP+MySQL,安装非常的简单</p>
</blockquote>
<p><img src="/blog/2018/03/03/Ajax/ajax/phpStudy.png" alt></p>
<h2 id="phpStudy的安装"><a href="#phpStudy的安装" class="headerlink" title="phpStudy的安装"></a>phpStudy的安装</h2><p>安装phpStudy，解压双击安装(<strong>非中文路径</strong>)，其它默认安装。</p>
<p><strong>推荐就安装在默认的目录下，一定不能有中文，否则肯定启动不起来。</strong></p>
<p><img src="/blog/2018/03/03/Ajax/ajax/phpStudy02.png" alt>;</p>
<h2 id="phpStudy的错误解决"><a href="#phpStudy的错误解决" class="headerlink" title="phpStudy的错误解决"></a>phpStudy的错误解决</h2><p>如果phpStudy启动发生错误，参数下列几点。</p>
<ul>
<li>一是防火墙拦截</li>
</ul>
<ul>
<li>二是 80端口已经被别的程序占用，如IIS，迅雷等；</li>
</ul>
<ul>
<li><p>三是没有安装VC9运行库,php和apache都是VC9编译。</p>
<p>解决以上三个问题，99%能一次性安装成功 </p>
</li>
</ul>
<p>为了减少出错安装路径不得有<strong>汉字</strong>，如有防火墙开启，会提示是否信任httpd、mysqld运行，请选择全部允许。 </p>
<h3 id="关闭IIS服务器"><a href="#关闭IIS服务器" class="headerlink" title="关闭IIS服务器"></a>关闭IIS服务器</h3><p>如果发现服务器启动不成功，很大原因是端口被占用了，因为windows默认会有一个iis服务器，只需要把iis服务器给禁用了即可。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//控制面板--&gt;程序--&gt;程序与功能--&gt;启用或关闭windows功能</span></span><br></pre></td></tr></table></figure>

<p><img src="/blog/2018/03/03/Ajax/ajax/iis.png" alt></p>
<h3 id="提示缺少vc9-库文件"><a href="#提示缺少vc9-库文件" class="headerlink" title="提示缺少vc9 库文件"></a>提示缺少vc9 库文件</h3><p>在提供的资料库中找到<strong>phpStudy运行库</strong>， 根据自己电脑操作系统的位数安装对应的vc9运行库即可。</p>
<p><img src="/blog/2018/03/03/Ajax/ajax/vc9.png" alt></p>
<h3 id="关闭防火墙"><a href="#关闭防火墙" class="headerlink" title="关闭防火墙"></a>关闭防火墙</h3><p>如果希望系统自己的服务器能够被别人访问。需要关闭防火墙。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//控制面板---&gt;系统和安全---&gt;Windows 防火墙---&gt;启动或者关闭windows防火墙</span></span><br></pre></td></tr></table></figure>



<h1 id="PHP基础"><a href="#PHP基础" class="headerlink" title="PHP基础"></a>PHP基础</h1><p><strong>PHP简介</strong></p>
<ul>
<li>开源（open source）软件，跨平台，常用操作系统稳定执行。Windows / Linux。做WEB开发的经典组合 WAMP,LAMP基本都是开源软件</li>
</ul>
<ul>
<li>入门简单,用户只需要关注应用，开发成本低</li>
</ul>
<ul>
<li>支持的大多数主流数据库。MySQL，oracle,Redis等<br>​</li>
</ul>
<blockquote>
<p>文件以.php后缀结尾，所有程序包含在<code>&lt;?php 这里写代码 ?&gt;</code><br>避免使用中文目录和中文文件名 </p>
<p>php页面无法直接打开需要运行在服务器环境当中</p>
</blockquote>
<p><strong><em>注意：学习php的目的是为了更好的学习前端技能，因为需要了解一些后台的知识，千万不要本末倒置，我们的课程重心在前端。</em></strong> </p>
<h2 id="php初体验"><a href="#php初体验" class="headerlink" title="php初体验"></a>php初体验</h2><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line">  	<span class="comment">//echo 相当于document.write</span></span><br><span class="line">    <span class="keyword">echo</span> <span class="string">"hello world"</span>;</span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure>

<p>输入中文乱码问题：如果使用echo输出中文，会乱码。</p>
<p><strong><em>在php的语法中，末尾必须加分号，不然就报错了（最后一行可以不加分号）</em></strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line">    <span class="comment">//content-Type:text/html;返回内容是一个HTML文档，这样设置后，就能识别HTML标签了。</span></span><br><span class="line">    <span class="comment">//charset=utf-8 设置编码集</span></span><br><span class="line">    header(<span class="string">"content-Type:text/html;charset=utf-8"</span>);</span><br><span class="line">    <span class="keyword">echo</span> <span class="string">"hello world"</span>;</span><br><span class="line">    <span class="keyword">echo</span> <span class="string">"&lt;br/&gt;"</span>;</span><br><span class="line">    <span class="keyword">echo</span> <span class="string">"大家好，我是春哥"</span>;</span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//思考：浏览器访问php文件时，过程是怎么样的？</span></span><br></pre></td></tr></table></figure>



<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><blockquote>
<p>php是一门弱类型语法，变量的类型可以随意改变。<br>变量其实就是存储数据的容器</p>
</blockquote>
<p><strong>变量的命名规则</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 不需要关键字进行声明，变量在第一次赋值的时候被创建。</span></span><br><span class="line"><span class="comment">//2. 必须以$符号开始</span></span><br><span class="line"><span class="comment">//3. $后面的命名规则与js的变量命名规则一致。</span></span><br><span class="line">$name = <span class="string">"春哥"</span>;</span><br><span class="line"><span class="keyword">echo</span> $name;</span><br></pre></td></tr></table></figure>



<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><h3 id="简单数据类型"><a href="#简单数据类型" class="headerlink" title="简单数据类型"></a>简单数据类型</h3><p><strong>字符串</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$str = <span class="string">"春哥"</span>;</span><br><span class="line"><span class="keyword">echo</span> $str;</span><br></pre></td></tr></table></figure>

<p><strong>整数</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$num = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">echo</span> $num;</span><br></pre></td></tr></table></figure>

<p><strong>浮点型</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$float = <span class="number">11.11</span>;</span><br><span class="line"><span class="keyword">echo</span> $float;</span><br></pre></td></tr></table></figure>

<p><strong>布尔类型</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$flag = <span class="keyword">true</span>;</span><br><span class="line"><span class="comment">//当布尔类型值为true时，输出1</span></span><br><span class="line"><span class="keyword">echo</span> $flag;</span><br><span class="line">$flag = <span class="keyword">false</span>;</span><br><span class="line"><span class="comment">//当布尔类型为false时，输出空字符串</span></span><br><span class="line"><span class="keyword">echo</span> $flag;</span><br></pre></td></tr></table></figure>

<p><strong>字符串连接符</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 在php中，+号只有算数的功能，并不能拼串</span></span><br><span class="line"><span class="comment">//2. 在php中，拼串使用.</span></span><br><span class="line">$name = <span class="string">"春哥"</span>;</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"大家好，我是"</span> . $name . <span class="string">"，今年18岁"</span>;</span><br></pre></td></tr></table></figure>

<p><strong>php中的单引号与双引号</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 字符串的定义可以使用单引号，也可以使用双引号</span></span><br><span class="line">$name = <span class="string">"春哥"</span>;</span><br><span class="line">$desc = <span class="string">'很帅'</span>;</span><br><span class="line"><span class="comment">//2. 双引号可以解析变量</span></span><br><span class="line"><span class="comment">//3. 单引号的性能会高于双引号（了解）</span></span><br><span class="line"></span><br><span class="line">$name = <span class="string">"春哥"</span>;<span class="comment">//春哥</span></span><br><span class="line"><span class="keyword">echo</span> $name;</span><br><span class="line">$desc = <span class="string">'很帅'</span>;</span><br><span class="line"><span class="keyword">echo</span> $desc;<span class="comment">//很帅</span></span><br><span class="line"></span><br><span class="line">$str = <span class="string">'$name 很帅'</span>;<span class="comment">//$name 很帅</span></span><br><span class="line"><span class="keyword">echo</span> $str;</span><br><span class="line"></span><br><span class="line">$str = <span class="string">"$name 很帅"</span>;<span class="comment">//春哥 很帅</span></span><br><span class="line"><span class="keyword">echo</span> $str;</span><br></pre></td></tr></table></figure>



<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><blockquote>
<p>在php中，数组分为两种，索引数组和关联数组</p>
<p>计算数组长度的方法： count(数组名);</p>
</blockquote>
<p><strong>索引数组（类似与JS中的数组）</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$arr = <span class="keyword">array</span>(<span class="string">"张飞"</span>,<span class="string">"赵云"</span>,<span class="string">"马超"</span>);</span><br><span class="line"><span class="keyword">echo</span> $arr;<span class="comment">//echo只能打印基本数据类型</span></span><br><span class="line"><span class="keyword">echo</span> $arr[<span class="number">0</span>];<span class="comment">//张飞</span></span><br></pre></td></tr></table></figure>

<p><strong>关联数组（类似与JS中的对象）</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//属性名必须用引号引起来</span></span><br><span class="line">$arr = <span class="keyword">array</span>(<span class="string">"name"</span>=&gt;<span class="string">"zhangsan"</span>, <span class="string">"age"</span>=&gt;<span class="number">18</span>);</span><br><span class="line"><span class="keyword">echo</span> $arr[<span class="string">"name"</span>];</span><br></pre></td></tr></table></figure>

<p><strong>输出语句</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. echo 输出简单数据类型</span></span><br><span class="line"><span class="comment">//2. print_r 输出数据结构，一般用于输出复杂类型。</span></span><br><span class="line">print_r($arr);<span class="comment">//print_r是一个函数，不要忘记小括号</span></span><br></pre></td></tr></table></figure>


<h2 id="语句"><a href="#语句" class="headerlink" title="语句"></a>语句</h2><h3 id="判断语句"><a href="#判断语句" class="headerlink" title="判断语句"></a>判断语句</h3><p>基本上来说，所有语言的if..else语法都是一样</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$age = <span class="number">17</span>;</span><br><span class="line"><span class="keyword">if</span> ($age &gt;= <span class="number">18</span>) &#123;</span><br><span class="line">  <span class="keyword">echo</span> <span class="string">"终于可以看电影了,嘿嘿嘿"</span>;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="keyword">echo</span> <span class="string">"哎，还是回家学习吧"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h3><p><strong>遍历索引数组</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$arr = <span class="keyword">array</span>(<span class="string">"张三"</span>, <span class="string">"李四"</span>, <span class="string">"王五"</span>, <span class="string">"赵六"</span>, <span class="string">"田七"</span>, <span class="string">"王八"</span>);</span><br><span class="line"><span class="comment">//获取数组的长度： count($arr)</span></span><br><span class="line"><span class="keyword">for</span>($i = <span class="number">0</span>; $i &lt; count($arr); $i++) &#123;</span><br><span class="line">  <span class="keyword">echo</span> $arr[$i];</span><br><span class="line">  <span class="keyword">echo</span> <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>遍历关联数组</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//遍历关联数组</span></span><br><span class="line">$arr = <span class="keyword">array</span>(</span><br><span class="line">  <span class="string">"name"</span>=&gt;<span class="string">"zs"</span>,</span><br><span class="line">  <span class="string">"age"</span>=&gt;<span class="number">18</span>,</span><br><span class="line">  <span class="string">"sex"</span>=&gt;<span class="number">20</span></span><br><span class="line">);</span><br><span class="line"><span class="keyword">foreach</span>($arr <span class="keyword">as</span> $key =&gt; $value) &#123;</span><br><span class="line">  <span class="keyword">echo</span> $key . <span class="string">"="</span> . $value . <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h1 id="表单提交"><a href="#表单提交" class="headerlink" title="表单提交"></a>表单提交</h1><p><img src="/blog/2018/03/03/Ajax/ajax/form.png" alt></p>
<blockquote>
<p>表单（form）：表单用于收集用户输入信息，并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. action：指定表单的提交地址</span></span><br><span class="line"><span class="comment">//2. method:指定表单的提交方式，get/post，默认get</span></span><br><span class="line"><span class="comment">//3. input的数据想要提交到后台，必须指定name属性，后台通过name属性获取值</span></span><br><span class="line"><span class="comment">//4. 想要提交表单，不能使用input:button 必须使用input:submit</span></span><br></pre></td></tr></table></figure>

<p><strong>php获取表单数据</strong> </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;$_GET是PHP系统提供的一个超全局变量，是一个数组，里面存放了表单通过get方式提交的数据。</span><br><span class="line">&#x2F;&#x2F;$_POST是PHP系统提供的一个超全局变量，是一个数组，里面存放了表单通过post方式提交的数据。</span><br></pre></td></tr></table></figure>

<p><strong>get与post的区别</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. get方式</span></span><br><span class="line">	<span class="comment">//1.1 数据会拼接在url地址的后面?username=hcc&amp;password=123456</span></span><br><span class="line">	<span class="comment">//1.2 地址栏有长度限制，因此get方式提交数据大小不会超过4k</span></span><br><span class="line"><span class="comment">//2. post方式</span></span><br><span class="line">	<span class="comment">//2.1 数据不会在url中显示，相比get方式，post更安全</span></span><br><span class="line">	<span class="comment">//2.2 提交的数据没有大小限制</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//根据HTTP规范，GET用于信息获取，POST表示可能修改变服务器上的资源的请求</span></span><br></pre></td></tr></table></figure>



<h1 id="http协议"><a href="#http协议" class="headerlink" title="http协议"></a>http协议</h1><blockquote>
<p>协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则<br>HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则，HTTP协议分为<strong>请求</strong> 和<strong>响应</strong> 两个部分组成。</p>
</blockquote>
<h2 id="请求与请求报文"><a href="#请求与请求报文" class="headerlink" title="请求与请求报文"></a>请求与请求报文</h2><p><strong>get请求的请求报文详解</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//--------------------------请求行--------------------------------</span></span><br><span class="line"><span class="comment">// GET  请求方式</span></span><br><span class="line"><span class="comment">// /day02/01.php?username=hucc&amp;password=123456    请求路径+参数（注意点）</span></span><br><span class="line"><span class="comment">// HTTP/1.1 HTTP的版本号</span></span><br><span class="line">GET /day02/<span class="number">01.</span>php?username=hucc&amp;password=<span class="number">123456</span> HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//--------------------------请求头--------------------------------</span></span><br><span class="line"><span class="comment">// Host:主机地址</span></span><br><span class="line">Host: www.study.com</span><br><span class="line"><span class="comment">// HTTP1.1版本默认开启，建立过连接后，TCP连接不会断开，下次连接可以继续使用（底层，不用管）</span></span><br><span class="line">Connection: keep-alive</span><br><span class="line"><span class="comment">//chrome浏览器自己增加的，不用管</span></span><br><span class="line">Upgrade-Insecure-Requests: <span class="number">1</span></span><br><span class="line"><span class="comment">//浏览器的代理字符串（版本信息）</span></span><br><span class="line">User-Agent: Mozilla/<span class="number">5.0</span> (Windows NT <span class="number">10.0</span>; WOW64) AppleWebKit/<span class="number">537.36</span> (KHTML, like Gecko) Chrome/<span class="number">58.0</span><span class="number">.3029</span><span class="number">.96</span> Safari/<span class="number">537.36</span></span><br><span class="line"><span class="comment">//浏览器端可以接受的类型。</span></span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=<span class="number">0.9</span>,image/webp,<span class="string">`*/*`</span>;q=<span class="number">0.8</span></span><br><span class="line"><span class="comment">//从哪个页面发出的请求</span></span><br><span class="line">Referer: http:<span class="comment">//www.study.com/day02/01-login.html</span></span><br><span class="line"><span class="comment">//检查浏览器支持的压缩方式</span></span><br><span class="line">Accept-Encoding: gzip, deflate, sdch</span><br><span class="line"><span class="comment">//浏览器支持的语言，优先中文。</span></span><br><span class="line">Accept-Language: zh-CN,zh;q=<span class="number">0.8</span>,en;q=<span class="number">0.6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------------请求体-------------------------------------</span></span><br><span class="line"><span class="comment">//get请求没有请求体，但是参数会拼接到请求行中</span></span><br></pre></td></tr></table></figure>



<p><strong>POST请求的请求报文</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//-----------------------请求行---------------------------------------------</span></span><br><span class="line">POST /day02/<span class="number">01.</span>php HTTP/<span class="number">1.1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//-----------------------请求头--------------------------------------------</span></span><br><span class="line">Host: www.study.com</span><br><span class="line">Connection: keep-alive</span><br><span class="line"><span class="comment">//传递的参数的长度。</span></span><br><span class="line">Content-Length: <span class="number">29</span></span><br><span class="line">Cache-Control: max-age=<span class="number">0</span></span><br><span class="line">Origin: http:<span class="comment">//www.study.com</span></span><br><span class="line">Upgrade-Insecure-Requests: <span class="number">1</span></span><br><span class="line">User-Agent: Mozilla/<span class="number">5.0</span> (Windows NT <span class="number">10.0</span>; WOW64) AppleWebKit/<span class="number">537.36</span> (KHTML, like Gecko) Chrome/<span class="number">58.0</span><span class="number">.3029</span><span class="number">.96</span> Safari/<span class="number">537.36</span></span><br><span class="line"><span class="comment">//内容类型：表单数据，如果是post请求，必须指定这个属性。</span></span><br><span class="line">Content-Type: application/x-www-form-urlencoded</span><br><span class="line">Accept: text/html,application/xhtml+xml,application/xml;q=<span class="number">0.9</span>,image/webp,<span class="string">`*/*`</span>;q=<span class="number">0.8</span></span><br><span class="line">Referer: http:<span class="comment">//www.study.com/day02/01-login.html</span></span><br><span class="line">Accept-Encoding: gzip, deflate</span><br><span class="line">Accept-Language: zh-CN,zh;q=<span class="number">0.8</span>,en;q=<span class="number">0.6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//------------------------请求体------------------------------------------</span></span><br><span class="line">username=hucc&amp;password=<span class="number">123456</span></span><br></pre></td></tr></table></figure>

<p><strong>GET请求与POST请求的对比</strong> </p>
<ul>
<li>GET请求没有请求体，因为GET请求的参数拼接到地址栏中了</li>
<li>POST请求有请求体，就是传递的参数</li>
<li>POST请求需要指定content-type属性。</li>
</ul>
<h2 id="响应与响应报文"><a href="#响应与响应报文" class="headerlink" title="响应与响应报文"></a>响应与响应报文</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//---------------------状态行（响应行）-------------------------------</span></span><br><span class="line"><span class="comment">//HTTP/1.1  HTTP版本</span></span><br><span class="line"><span class="comment">//200 响应的状态</span></span><br><span class="line">	<span class="comment">//200表示成功</span></span><br><span class="line">	<span class="comment">//304表示读缓存</span></span><br><span class="line">	<span class="comment">//404表示找不到资源</span></span><br><span class="line">	<span class="comment">//500表示服务端错误</span></span><br><span class="line">HTTP/<span class="number">1.1</span> <span class="number">200</span> OK</span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------响应头-----------------------------------------------</span></span><br><span class="line"><span class="built_in">Date</span>: Thu, <span class="number">22</span> Jun <span class="number">2017</span> <span class="number">16</span>:<span class="number">51</span>:<span class="number">22</span> GMT</span><br><span class="line">Server: Apache/<span class="number">2.4</span><span class="number">.23</span> (Win32) OpenSSL/<span class="number">1.0</span><span class="number">.2</span>j PHP/<span class="number">5.4</span><span class="number">.45</span></span><br><span class="line">X-Powered-By: PHP/<span class="number">5.4</span><span class="number">.45</span></span><br><span class="line">Content-Length: <span class="number">18</span></span><br><span class="line">Keep-Alive: timeout=<span class="number">5</span>, max=<span class="number">100</span></span><br><span class="line">Connection: Keep-Alive</span><br><span class="line"><span class="comment">//内容类型，告诉浏览器该如何解析响应结果</span></span><br><span class="line">Content-Type: text/html;charset=utf<span class="number">-8</span></span><br><span class="line"><span class="comment">//-----------------------响应体------------------------------------------------</span></span><br><span class="line">用户登录成功</span><br></pre></td></tr></table></figure>

<p>通常来说，我们不会用抓包工具来查看请求和响应，太麻烦了，可以直接使用谷歌浏览器来查看请求报文和响应报文。</p>
<p>谷歌浏览器会对报文进行一定的格式化，看起来虽然不是原生的报文，但是使用起来更加的方便简洁。</p>
<h1 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h1><blockquote>
<p>即 Asynchronous [e’sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。</p>
</blockquote>
<h2 id="同步与异步"><a href="#同步与异步" class="headerlink" title="同步与异步"></a>同步与异步</h2><p>同步和异步概念：</p>
<p>同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务</p>
<p>异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。</p>
<p>编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。</p>
<p>ajax技术的应用：</p>
<ol>
<li>验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。</li>
<li>百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。</li>
</ol>
<p>XMLHttpRequest可以以异步方式的处理程序。</p>
<h2 id="XMLHttpRequest"><a href="#XMLHttpRequest" class="headerlink" title="XMLHttpRequest"></a>XMLHttpRequest</h2><blockquote>
<p>浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。</p>
</blockquote>
<h3 id="发送get请求"><a href="#发送get请求" class="headerlink" title="发送get请求"></a>发送get请求</h3><p>XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用XMLHttpRequest发送get请求的步骤</span></span><br><span class="line"><span class="comment">//1. 创建一个XMLHttpRequest对象</span></span><br><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest;<span class="comment">//构造函数没有参数的情况,括号可以省略</span></span><br><span class="line"><span class="comment">//2. 设置请求行</span></span><br><span class="line"><span class="comment">//第一个参数:请求方式  get/post</span></span><br><span class="line"><span class="comment">//第二个参数:请求的地址 需要在url后面拼上参数列表</span></span><br><span class="line">xhr.open(<span class="string">"get"</span>, <span class="string">"08.php?name=hucc"</span>);</span><br><span class="line"><span class="comment">//3. 设置请求头</span></span><br><span class="line"><span class="comment">//浏览器会给我们默认添加基本的请求头,get请求时无需设置</span></span><br><span class="line"><span class="comment">//4. 设置请求体</span></span><br><span class="line"><span class="comment">//get请求的请求体为空,因为参数列表拼接到url后面了</span></span><br><span class="line">xhr.send(<span class="literal">null</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>get请求,设置请求行时,需要把参数列表拼接到url后面</li>
<li>get请求不用设置请求头</li>
<li>get请求的请求体为null</li>
</ul>
<h3 id="发送post请求"><a href="#发送post请求" class="headerlink" title="发送post请求"></a>发送post请求</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest;</span><br><span class="line"><span class="comment">//1. 设置请求行 post请求的参数列表在请求体中</span></span><br><span class="line">xhr.open(<span class="string">"post"</span>, <span class="string">"09.php"</span>);</span><br><span class="line"><span class="comment">//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据</span></span><br><span class="line">xhr.setRequestHeader(<span class="string">"content-type"</span>, <span class="string">"application/x-www-form-urlencoded"</span>);</span><br><span class="line"><span class="comment">//3. 设置请求体</span></span><br><span class="line">xhr.send(<span class="string">"name=hucc&amp;age=18"</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>post请求,设置请求行时,参数列表不能拼接到url后面</li>
<li>post必须设置请求头中的content-type为application/x-www-form-urlencoded</li>
<li>post请求需要将参数列表设置到请求体中.</li>
</ul>
<h3 id="获取响应"><a href="#获取响应" class="headerlink" title="获取响应"></a>获取响应</h3><p>HTTP响应分为3个部分，状态行、响应头、响应体。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//给xhr注册一个onload事件，当xhr的状态发生状态发生改变时，会触发这个事件。</span></span><br><span class="line">xhr.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; </span><br><span class="line">    <span class="comment">//1. 获取状态行</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"状态行:"</span>+xhr.status);</span><br><span class="line">    <span class="comment">//2. 获取响应头</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"所有的相应头:"</span>+xhr.getAllResponseHeaders());</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"指定相应头:"</span>+xhr.getResponseHeader(<span class="string">"content-type"</span>));</span><br><span class="line">    <span class="comment">//3. 获取响应体</span></span><br><span class="line">    <span class="built_in">console</span>.log(xhr.responseText);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="数据交互"><a href="#数据交互" class="headerlink" title="数据交互"></a>数据交互</h2><blockquote>
<p>浏览器端只是负责用户的交互和数据的收集以及展示，真正的数据都是存储在服务器端的。我们现在通过ajax的确可以返回一些简单的数据（一个字符串），但是在实际开发过程中，肯定会会设计到大量的复杂类型的数据传输，比如数组、对象等，但是每个编程语言的语法都不一样。因此我们会采用通过的数据交换格式（XML、JSON）来进行数据的交互。</p>
</blockquote>
<h3 id="XML"><a href="#XML" class="headerlink" title="XML"></a>XML</h3><p><strong>什么是XML</strong></p>
<ul>
<li>XML 指可扩展标记语言（EXtensible Markup Language）</li>
<li>XML 是一种标记语言，很类似 HTML</li>
<li>XML 的设计宗旨是传输数据，而非显示数据</li>
<li>XML 标签没有被预定义。您需要自行定义标签。</li>
</ul>
<p><strong>语法规范</strong></p>
<ul>
<li>第一行必须是版本信息</li>
<li>必须有一个根元素（有且仅有一个）</li>
<li>标签不可有空格、不可以数字或.开头、大小写敏感</li>
<li>不可交叉嵌套，都是双标签，如果是单标签，必须闭合</li>
<li>属性双引号（浏览器自动修正成双引号了）</li>
<li>特殊符号要使用实体</li>
<li>注释和HTML一样</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">students</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">student</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">name</span>&gt;</span>张三<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">age</span>&gt;</span>18<span class="tag">&lt;/<span class="name">age</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">gender</span>&gt;</span>男<span class="tag">&lt;/<span class="name">gender</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">desc</span>&gt;</span>路人甲<span class="tag">&lt;/<span class="name">desc</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">student</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">student</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">name</span>&gt;</span>李四<span class="tag">&lt;/<span class="name">name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">age</span>&gt;</span>20<span class="tag">&lt;/<span class="name">age</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">gender</span>&gt;</span>男<span class="tag">&lt;/<span class="name">gender</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">desc</span>&gt;</span>路人乙<span class="tag">&lt;/<span class="name">desc</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">student</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">students</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p><strong>html解析xml</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取服务端返回的xml数据，需要使用xhr.responseXML，这是一个document对象，可以使用DOM中的方法查找元素。</span></span><br><span class="line"><span class="keyword">var</span> data = xhr.responseXML;</span><br><span class="line"><span class="comment">//获取所有的学生</span></span><br><span class="line"><span class="keyword">var</span> students = data.querySelectorAll(<span class="string">"student"</span>);</span><br></pre></td></tr></table></figure>

<p>缺点：虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。</p>
<h3 id="JSON数据"><a href="#JSON数据" class="headerlink" title="JSON数据"></a>JSON数据</h3><p>JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。</p>
<ul>
<li>数据在名称/值对中</li>
<li>数据由逗号分隔(最后一个健/值对不能带逗号)</li>
<li>花括号保存对象，方括号保存数组</li>
<li>键使用双引号</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">a</span>: <span class="string">'Hello'</span>, <span class="attr">b</span>: <span class="string">'World'</span>&#125;; <span class="comment">//这是一个对象，注意键名也是可以使用引号包裹的</span></span><br><span class="line"><span class="keyword">var</span> json = <span class="string">'&#123;"a": "Hello", "b": "World"&#125;'</span>; <span class="comment">//这是一个 JSON 字符串，本质是一个字符串</span></span><br></pre></td></tr></table></figure>

<p><strong>JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取</strong></p>
<h4 id="php处理json"><a href="#php处理json" class="headerlink" title="php处理json"></a>php处理json</h4><ul>
<li>php关联数组==&gt; json</li>
</ul>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// php的关联数组</span></span><br><span class="line">$obj = <span class="keyword">array</span>(</span><br><span class="line">  <span class="string">"a"</span>=&gt;<span class="string">"hello"</span>,</span><br><span class="line">  <span class="string">"b"</span>=&gt;<span class="string">"world"</span>,</span><br><span class="line">  <span class="string">"name"</span>=&gt;<span class="string">"胡聪聪"</span></span><br><span class="line">);</span><br><span class="line"><span class="comment">//json字符串</span></span><br><span class="line">$json = json_encode($obj);</span><br><span class="line"><span class="keyword">echo</span> $json;</span><br></pre></td></tr></table></figure>

<ul>
<li>json===&gt;php对象</li>
</ul>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">$json = <span class="string">'&#123;"a": "Hello", "b": "World"&#125;'</span>;<span class="comment">//json字符串</span></span><br><span class="line"><span class="comment">//第一个参数：json字符串</span></span><br><span class="line"><span class="comment">//第二个参数：</span></span><br><span class="line">	<span class="comment">//false，将json转换成对象(默认)</span></span><br><span class="line">	<span class="comment">//true：将对象转换成数组(推荐)</span></span><br><span class="line">$obj = json_decode($json,<span class="keyword">true</span>);</span><br><span class="line"><span class="keyword">echo</span> $obj[<span class="string">'a'</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">//通过json文件获取到的内容就是一个json字符串。</span></span><br><span class="line">$data = file_get_contents(<span class="string">"data.json"</span>);</span><br><span class="line"><span class="comment">//将json转换成数组</span></span><br><span class="line">$result = json_decode($data, <span class="keyword">true</span>);</span><br><span class="line">print_r($result);</span><br></pre></td></tr></table></figure>



<h4 id="JS处理json"><a href="#JS处理json" class="headerlink" title="JS处理json"></a>JS处理json</h4><ul>
<li>JS对象 ==&gt; JSON字符串 JSON.stringify(obj)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//obj是一个js对象</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">a</span>: <span class="string">'Hello'</span>, <span class="attr">b</span>: <span class="string">'World'</span>&#125;</span><br><span class="line"><span class="comment">//result就变成了一个json字符串了</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">JSON</span>.stringify(obj);<span class="comment">// '&#123;"a": "Hello", "b": "World"&#125;'</span></span><br></pre></td></tr></table></figure>

<ul>
<li>JSON字符串 ==&gt; JS对象  JSON.parse(obj)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//json是一个json字符串</span></span><br><span class="line"><span class="keyword">var</span> json = <span class="string">'&#123;"a": "Hello", "b": "World"&#125;'</span>;</span><br><span class="line"><span class="comment">//obj就变成了一个js对象</span></span><br><span class="line"><span class="keyword">var</span> obj = <span class="built_in">JSON</span>.parse(json);<span class="comment">// &#123;a: 'Hello', b: 'World'&#125;</span></span><br></pre></td></tr></table></figure>



<p>使用json进行数据传输</p>
<p>思考：</p>
<ol>
<li>js有一个对象，如何发送到php后台</li>
<li>php中有一个对象，如何发送到前台。</li>
</ol>
<p>【案例：获取表格数据.html】</p>
<h2 id="兼容性处理"><a href="#兼容性处理" class="headerlink" title="兼容性处理"></a>兼容性处理</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">if</span>(XMLHttpRequest)&#123;</span><br><span class="line">  <span class="comment">//现代浏览器</span></span><br><span class="line">  xhr = <span class="keyword">new</span>  XMLHttpRequest();</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">  <span class="comment">//IE5.5支持</span></span><br><span class="line">  xmlHttp=<span class="keyword">new</span> ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>前后端分离</strong></p>
<p>​    我们使用php动态渲染页面时，有很多比较麻烦的地方。</p>
<ul>
<li>在前端写好页面以后，需要后台进行修改，意味这后端程序员也需要懂前端的知识，其实渲染的工作应该交给前端来做。</li>
<li>前端没有写好页面的话，后端无法开始工作，需要等待前端的页面完成之后才能开始工作，拖延项目 的进度。</li>
<li>在客户端设备多元化的情况下，后台渲染的页面无法满足所有用户的需求</li>
<li>前后端代码混合在一个文件中，项目修改和维护成本高​</li>
</ul>
<h2 id="jQuery中的ajax方法"><a href="#jQuery中的ajax方法" class="headerlink" title="jQuery中的ajax方法"></a>jQuery中的ajax方法</h2><blockquote>
<p>jQuery为我们提供了更强大的Ajax封装</p>
</blockquote>
<h3 id="ajax"><a href="#ajax" class="headerlink" title="$.ajax"></a>$.ajax</h3><p>参数列表</p>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>描述</th>
<th>取值</th>
<th>示例</th>
</tr>
</thead>
<tbody><tr>
<td>url</td>
<td>接口地址</td>
<td></td>
<td>url:”02.php”</td>
</tr>
<tr>
<td>type</td>
<td>请求方式</td>
<td>get/post</td>
<td>type:”get”</td>
</tr>
<tr>
<td>timeout</td>
<td>超时时间</td>
<td>单位毫秒</td>
<td>timeout:5000</td>
</tr>
<tr>
<td>dataType</td>
<td>服务器返回的格式</td>
<td>json/xml/text(默认)</td>
<td>dataType:”json”</td>
</tr>
<tr>
<td>data</td>
<td>发送的请求数据</td>
<td>对象</td>
<td>data:{name:”zs”, age:18}</td>
</tr>
<tr>
<td>beforeSend</td>
<td>调用前的回调函数</td>
<td>function(){}</td>
<td>beforeSend:function(){ alert(1) }</td>
</tr>
<tr>
<td>success</td>
<td>成功的回调函数</td>
<td>function (data) {}</td>
<td>success:function (data) {}</td>
</tr>
<tr>
<td>error</td>
<td>失败的回调函数</td>
<td>function (error) {}</td>
<td>error:function(data) {}</td>
</tr>
<tr>
<td>complete</td>
<td>完成后的回调函数</td>
<td>function () {}</td>
<td>complete:function () {}</td>
</tr>
</tbody></table>
<p>使用示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">  type:<span class="string">"get"</span>,<span class="comment">//请求类型</span></span><br><span class="line">  url:<span class="string">"02.php"</span>,<span class="comment">//请求地址</span></span><br><span class="line">  data:&#123;<span class="attr">name</span>:<span class="string">"zs"</span>, <span class="attr">age</span>:<span class="number">18</span>&#125;,<span class="comment">//请求数据</span></span><br><span class="line">  dataType:<span class="string">"json"</span>,<span class="comment">//希望接受的数据类型</span></span><br><span class="line">  timeout:<span class="number">5000</span>,<span class="comment">//设置超时时间</span></span><br><span class="line">  beforeSend:<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("发送前调用");</span></span><br><span class="line">  &#125;,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("成功时调用");</span></span><br><span class="line">    <span class="built_in">console</span>.log(data);</span><br><span class="line">  &#125;,</span><br><span class="line">  error:<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("失败时调用");</span></span><br><span class="line">    <span class="built_in">console</span>.log(error);</span><br><span class="line">  &#125;,</span><br><span class="line">  complete:<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//alert("请求完成时调用");</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>【案例：登录案例.html】</p>
<h3 id="其他api-了解"><a href="#其他api-了解" class="headerlink" title="其他api(了解)"></a>其他api(了解)</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$.post(url, callback, [dataType]);只发送post请求</span></span><br><span class="line"><span class="comment">//$.get(url, callback, [dataType]);</span></span><br><span class="line"><span class="comment">//$.getJSON(url, callback);</span></span><br><span class="line"><span class="comment">//$.getScript(url,callback);//载入服务器端的js文件</span></span><br><span class="line"><span class="comment">//$("div").load(url);//载入一个服务器端的html页面。</span></span><br></pre></td></tr></table></figure>



<h3 id="接口化开发"><a href="#接口化开发" class="headerlink" title="接口化开发"></a>接口化开发</h3><p>请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能， 并且严格约束了<strong>请求参数</strong> 和<strong>响应结果</strong> 的格式，这样前后端在开发过程中，可以减少不必要的讨论， 从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口进行调整时，并不影响到前端的功能。</p>
<h4 id="注册接口"><a href="#注册接口" class="headerlink" title="注册接口"></a>注册接口</h4><p><strong>表单序列化</strong></p>
<p>jquery提供了一个<code>serialize()</code>方法序列化表单，说白就是将表单中带有name属性的所有参数拼成一个格式为<code>name=value&amp;name1=value1</code>这样的字符串。方便我们获取表单的数据。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//serialize将表单参数序列化成一个字符串。必须指定name属性</span></span><br><span class="line"><span class="comment">//name=hucc&amp;pass=123456&amp;repass=123456&amp;mobile=18511249258&amp;code=1234</span></span><br><span class="line">$(<span class="string">'form'</span>).serialize();</span><br></pre></td></tr></table></figure>

<p><strong>jquery的ajax方法，data参数能够直接识别表单序列化的数据<code>data:$(&#39;form&#39;).serialize()</code></strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$.post(&#123;</span><br><span class="line">  url:<span class="string">"register.php"</span>,</span><br><span class="line">  data:$(<span class="string">'form'</span>).serialize(),</span><br><span class="line">  dataType:<span class="string">'json'</span>,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span> (<span class="params">info</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(info);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<p><strong>需求文档</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//注册功能</span></span><br><span class="line"><span class="comment">//总需求：点击注册按钮，向服务端发送请求</span></span><br><span class="line"><span class="comment">//需求1:表单校验</span></span><br><span class="line">  <span class="comment">//1.1 用户名不能为空，否则提示"请输入用户名"</span></span><br><span class="line">  <span class="comment">//1.2 密码不能为空，否则提示"请输入密码"</span></span><br><span class="line">  <span class="comment">//1.3 确认密码必须与密码一直，否则提示"确认密码与密码不一致"</span></span><br><span class="line">  <span class="comment">//1.4 手机号码不能为空，否则提示"请输入手机号码";</span></span><br><span class="line">  <span class="comment">//1.5 手机号码格式必须正确，否则提示"手机号格式错误"</span></span><br><span class="line">  <span class="comment">//1.6 短信验证码必须是4位的数字，否则提示"验证码格式错误"</span></span><br><span class="line"><span class="comment">//需求2：点击注册按钮时，按钮显示为"注册中...",并且不能重复提交请求</span></span><br><span class="line"><span class="comment">//需求3：根据不同响应结果，处理响应</span></span><br><span class="line">	 <span class="comment">//3.1显示注册结果</span></span><br></pre></td></tr></table></figure>



<h1 id="模板引擎"><a href="#模板引擎" class="headerlink" title="模板引擎"></a>模板引擎</h1><blockquote>
<p>是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。</p>
</blockquote>
<h2 id="为什么要使用模板引擎"><a href="#为什么要使用模板引擎" class="headerlink" title="为什么要使用模板引擎"></a>为什么要使用模板引擎</h2><p>我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行，但是如果页面结构很复杂，使用拼串的话<strong>代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。</strong> </p>
<p>【演示：使用拼串进行渲染的缺点.html】</p>
<p>作用：代替前面渲染数据是拼接字符串操作</p>
<p>实际工作渲染数据使用的模板引擎 </p>
<h2 id="常见的模板引擎"><a href="#常见的模板引擎" class="headerlink" title="常见的模板引擎"></a>常见的模板引擎</h2><p>BaiduTemplate：<a href="http://tangram.baidu.com/BaiduTemplate/" target="_blank" rel="noopener">http://tangram.baidu.com/BaiduTemplate/</a><br>velocity.js：<a href="https://github.com/shepherdwind/velocity.js/" target="_blank" rel="noopener">https://github.com/shepherdwind/velocity.js/</a><br>ArtTemplate：<a href="https://github.com/aui/artTemplate" target="_blank" rel="noopener">https://github.com/aui/artTemplate</a></p>
<p>artTemplate是使用最广泛，效率最高的模板引擎，需要大家掌握。</p>
<h2 id="artTemplate的使用"><a href="#artTemplate的使用" class="headerlink" title="artTemplate的使用"></a>artTemplate的使用</h2><p><a href="https://github.com/aui/art-template" target="_blank" rel="noopener">github地址</a></p>
<p><a href="https://aui.github.io/art-template/docs/" target="_blank" rel="noopener">中文api地址</a></p>
<h3 id="artTemplate入门"><a href="#artTemplate入门" class="headerlink" title="artTemplate入门"></a>artTemplate入门</h3><p><strong>1.引入模板引擎的js文件</strong> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"template-web.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>2.准备模板</strong> </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">  指定了type为text/template后，这一段script标签并不会解析，也不会显示。</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/template"</span> <span class="attr">id</span>=<span class="string">"tmp"</span>&gt;</span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>姓名：</span><span class="template-variable">&#123;&#123; username &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span>  </span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>年龄：</span><span class="template-variable">&#123;&#123; age &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>技能：</span><span class="template-variable">&#123;&#123; skill &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>描述：</span><span class="template-variable">&#123;&#123;desc &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>3.准备数据</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//3. 准备数据,数据是后台获取的，可以随时变化</span></span><br><span class="line"><span class="keyword">var</span> json = &#123;</span><br><span class="line">  userName:<span class="string">"隔壁老王"</span>,</span><br><span class="line">  age:<span class="number">18</span>,</span><br><span class="line">  skill:<span class="string">"查水表"</span>,</span><br><span class="line">  desc:<span class="string">"年轻气壮"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>4.将模板与数据进行绑定</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一个参数：模板的id</span></span><br><span class="line"><span class="comment">//第二个参数：数据</span></span><br><span class="line"><span class="comment">//返回值：根据模板生成的字符串。</span></span><br><span class="line"><span class="keyword">var</span> html = template(<span class="string">"myTmp"</span>, json);</span><br><span class="line"><span class="built_in">console</span>.log(html);</span><br></pre></td></tr></table></figure>

<p><strong>5.将数据显示到页面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">"div"</span>);</span><br><span class="line">div.innerHTML = html;</span><br></pre></td></tr></table></figure>

<p><strong>注意：传递给模板引擎的数据必须是对象</strong></p>
<h3 id="artTemplate语法"><a href="#artTemplate语法" class="headerlink" title="artTemplate语法"></a>artTemplate语法</h3><p><strong>if语法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;if gender='男'&#125;&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"man"</span>&gt;</span></span><br><span class="line">&#123;&#123;else&#125;&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"woman"</span>&gt;</span></span><br><span class="line">&#123;&#123;/if&#125;&#125;</span><br></pre></td></tr></table></figure>

<p><strong>each语法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">  1. &#123;&#123;each data&#125;&#125;  可以通过$value 和 $index获取值和下标</span></span><br><span class="line"><span class="comment">  2. &#123;&#123;each data v i&#125;&#125;  自己指定值为v，下标为i</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line">&#123;&#123;each data v i&#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123;v.url&#125;&#125;"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&#123;&#123;v.src&#125;&#125;"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;v.content&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">&#123;&#123;/each&#125;&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果返回的数据是个数组，必须使用对象进行包裹，因为在&#123;&#123;&#125;&#125;中只写书写对象的属性。</span></span><br><span class="line"><span class="keyword">var</span> html = template(<span class="string">"navTmp"</span>, &#123;<span class="attr">data</span>:info&#125;);</span><br></pre></td></tr></table></figure>



<h1 id="同源与跨域"><a href="#同源与跨域" class="headerlink" title="同源与跨域"></a>同源与跨域</h1><h2 id="同源"><a href="#同源" class="headerlink" title="同源"></a>同源</h2><p>不同源 则跨域 </p>
<h3 id="同源策略的基本概念"><a href="#同源策略的基本概念" class="headerlink" title="同源策略的基本概念"></a>同源策略的基本概念</h3><blockquote>
<p>1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。<br>同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。现在浏览器的所谓”同源”指的是”三个相同”:</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">协议相同</span><br><span class="line">域名相同</span><br><span class="line">端口相同</span><br></pre></td></tr></table></figure>

<p>举例来说，<code>http://www.example.com/dir/page.html</code>这个网址，协议是<code>http://</code>，域名是<code>www.example.com</code>，端口是<code>80</code>（默认端口可以省略）。它的同源情况如下。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//http://www.example.com/dir2/other.html：同源</span></span><br><span class="line"><span class="comment">//http://example.com/dir/other.html：不同源（域名不同）</span></span><br><span class="line"><span class="comment">//http://v2.www.example.com/dir/other.html：不同源（域名不同）</span></span><br><span class="line"><span class="comment">//http://www.example.com:81/dir/other.html：不同源（端口不同）</span></span><br></pre></td></tr></table></figure>

<h3 id="同源策略的目的"><a href="#同源策略的目的" class="headerlink" title="同源策略的目的"></a>同源策略的目的</h3><blockquote>
<p>同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。</p>
</blockquote>
<h3 id="同源策略的限制范围"><a href="#同源策略的限制范围" class="headerlink" title="同源策略的限制范围"></a>同源策略的限制范围</h3><blockquote>
<p>随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. Cookie、LocalStorage 无法读取。</span></span><br><span class="line"><span class="comment">//2. DOM 无法获得。</span></span><br><span class="line"><span class="comment">//3. AJAX 请求不能发送。</span></span><br></pre></td></tr></table></figure>

<p>虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到<strong>跨域</strong> 。</p>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><p>【演示跨域问题.html】</p>
<h3 id="jsonp"><a href="#jsonp" class="headerlink" title="jsonp"></a>jsonp</h3><blockquote>
<p>JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。原理：服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。</p>
</blockquote>
<p><code>script</code> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。类似的还有<code>img</code>和<code>link</code>标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--不受同源策略的标签--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://www.api.com/1.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://www.api.com/1.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="jsonp演化过程"><a href="#jsonp演化过程" class="headerlink" title="jsonp演化过程"></a>jsonp演化过程</h4><p>jsonp原理大家知道即可，不用太过于去纠结这个原理，因此jquery已经帮我们封装好了，我们使用起来非常的方便。</p>
<h3 id="jquery对于jsonp的封装"><a href="#jquery对于jsonp的封装" class="headerlink" title="jquery对于jsonp的封装"></a>jquery对于jsonp的封装</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用起来相当的简单，跟普通的get请求没有任何的区别，只需要把dataType固定成jsonp即可。</span></span><br><span class="line">$.ajax(&#123;</span><br><span class="line">  type:<span class="string">"get"</span>,</span><br><span class="line">  url:<span class="string">"http://www.api.com/testjs.php"</span>,</span><br><span class="line">  dataType:<span class="string">"jsonp"</span>,</span><br><span class="line">  data:&#123;</span><br><span class="line">    uname:<span class="string">"hucc"</span>,</span><br><span class="line">    upass:<span class="string">"123456"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span> (<span class="params">info</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(info);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>【案例：查询天气.html】</p>
<p><a href="http://lbsyun.baidu.com/index.php?title=car/api/weather" target="_blank" rel="noopener">http://lbsyun.baidu.com/index.php?title=car/api/weather</a></p>
<p><a href="https://www.jisuapi.com/api/weather/" target="_blank" rel="noopener">天气查询api地址</a></p>
<p>秘钥：zVo5SStav7IUiVON0kuCogecm87lonOj</p>
<p>图灵机器人：<a href="http://www.tuling123.com/" target="_blank" rel="noopener">http://www.tuling123.com/</a></p>
<h1 id="XMLHttpRequest-2-0"><a href="#XMLHttpRequest-2-0" class="headerlink" title="XMLHttpRequest 2.0"></a>XMLHttpRequest 2.0</h1><blockquote>
<p>XMLHttpRequest是一个javascript内置对象，使得Javascript可以进行异步的HTTP通信。2008年2月，就提出了XMLHttpRequest Level 2 草案。</p>
</blockquote>
<p>老版本的XMLHttpRequest的缺点：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 仅支持传输文本数据，无法传说二进制文件，比如图片视频等。</span></span><br><span class="line"><span class="comment">//2. 传输数据时，没有进度信息，只能提示完成与否。</span></span><br><span class="line"><span class="comment">//3. 受到了"同源策略"的限制</span></span><br></pre></td></tr></table></figure>



<p>新版本的功能：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 可以设置timeout 超时时间</span></span><br><span class="line"><span class="comment">//2. 可以使用formData对象管理表单数据</span></span><br><span class="line"><span class="comment">//3. 可以获取数据传输的进度信息</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：我们现在使用new XMLHttpRequest创建的对象就是2.0对象了，我们之前学的是1.0的语法，现在学习一些2.0的新特性即可。</strong>  </p>
<h2 id="timeout设置超时"><a href="#timeout设置超时" class="headerlink" title="timeout设置超时"></a>timeout设置超时</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">xhr.timeout = <span class="number">3000</span>;<span class="comment">//设置超时时间</span></span><br><span class="line">xhr.ontimeout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="string">"请求超时"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="formData管理表单数据"><a href="#formData管理表单数据" class="headerlink" title="formData管理表单数据"></a>formData管理表单数据</h2><blockquote>
<p>formData对象类似于jquery的serialize方法，用于管理表单数据</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用特点： </span></span><br><span class="line"><span class="comment">//1. 实例化一个formData对象， new formData(form); form就是表单元素</span></span><br><span class="line"><span class="comment">//4. formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。</span></span><br><span class="line"><span class="comment">//5. formData有一个append方法，可以添加参数。formData.append("id", "1111");</span></span><br><span class="line"><span class="comment">//6. 这种方式只能以post形式传递，不需要设置请求头，浏览器会自动为我们设置一个合适的请求头。</span></span><br></pre></td></tr></table></figure>



<p>代码示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 使用formData必须发送post请求</span></span><br><span class="line">    xhr.open(<span class="string">"post"</span>, <span class="string">"02-formData.php"</span>);</span><br><span class="line">    </span><br><span class="line"><span class="comment">//2. 获取表单元素</span></span><br><span class="line"><span class="keyword">var</span> form = <span class="built_in">document</span>.querySelector(<span class="string">"#myForm"</span>);</span><br><span class="line"><span class="comment">//3. 创建form对象，可以直接作为send的参数。</span></span><br><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> FormData(form);</span><br><span class="line"></span><br><span class="line"><span class="comment">//4. formData可以使用append方法添加参数</span></span><br><span class="line">formData.append(<span class="string">"id"</span>, <span class="string">"1111"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//5. 发送，不需要指定请求头，浏览器会自动选择合适的请求头</span></span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>



<h2 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h2><blockquote>
<p>以前，文件上传需要借助表单进行上传，但是表单上传是同步的，也就是说文件上传时，页面需要提交和刷新，用户体验不友好，xhr2.0中的formData对象支持文件的异步上传。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> FormData();</span><br><span class="line"><span class="comment">//获取上传的文件，传递到后端</span></span><br><span class="line"><span class="keyword">var</span> file = <span class="built_in">document</span>.getElementById(<span class="string">"file"</span>).files[<span class="number">0</span>];</span><br><span class="line">formData.append(<span class="string">"file"</span>, file);</span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>



<h2 id="显示文件进度信息"><a href="#显示文件进度信息" class="headerlink" title="显示文件进度信息"></a>显示文件进度信息</h2><blockquote>
<p>xhr2.0还支持获取上传文件的进度信息，因此我们可以根据进度信息可以实时的显示文件的上传进度。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 需要注册 xhr.upload.onprogress = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;&#125; 事件，用于监听文件上传的进度.注意：需要在send之前注册。</span><br><span class="line"><span class="number">2.</span> 上传的进度信息会存储事件对象e中</span><br><span class="line"><span class="number">3.</span> e.loaded表示已上传的大小   e.total表示整个文件的大小</span><br></pre></td></tr></table></figure>



<p>代码参考：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">xhr.upload.onprogress = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">  </span><br><span class="line">  inner.style.width = (e.loaded/e.total*<span class="number">100</span>).toFixed(<span class="number">2</span>)+<span class="string">"%"</span>;</span><br><span class="line">  span.innerHTML = (e.loaded/e.total*<span class="number">100</span>).toFixed(<span class="number">2</span>)+<span class="string">"%"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">xhr.send(formData);</span><br></pre></td></tr></table></figure>

<p>如果上传文件超过8M，php会报错，需要进行设置，允许php上传大文件。</p>
<p><img src="/blog/2018/03/03/Ajax/ajax/%E5%89%8D%E7%AB%AF%E8%A7%86%E9%A2%91/38%E6%9C%9F%E5%B0%B1%E4%B8%9A%E7%8F%AD/ajax/01/01-%E6%95%99%E5%AD%A6%E8%B5%84%E6%96%99/image/php.png" alt></p>
<h2 id="跨域资源共享-CORS"><a href="#跨域资源共享-CORS" class="headerlink" title="跨域资源共享(CORS)"></a>跨域资源共享(CORS)</h2><h3 id="cors的使用"><a href="#cors的使用" class="headerlink" title="cors的使用"></a>cors的使用</h3><blockquote>
<p>新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做<a href="http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing" target="_blank" rel="noopener">“跨域资源共享”</a>（Cross-origin resource sharing，简称CORS）。</p>
</blockquote>
<p>跨域资源共享（CORS）的前提</p>
<ul>
<li>浏览器支持这个功能</li>
<li>服务器必须允许这种跨域。</li>
</ul>
<p>服务器允许跨域的代码：</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//允许所有的域名访问这个接口</span></span><br><span class="line">header(<span class="string">"Access-Control-Allow-Origin:*"</span>);</span><br><span class="line"><span class="comment">//允许www.study.com这个域名访问这个接口</span></span><br><span class="line">header(<span class="string">"Access-Control-Allow-Origin:http://www.study.com"</span>);</span><br></pre></td></tr></table></figure>



<h3 id="CORS的具体流程（了解）"><a href="#CORS的具体流程（了解）" class="headerlink" title="CORS的具体流程（了解）"></a>CORS的具体流程（了解）</h3><ol>
<li>浏览器会根据<strong>同源策略</strong> 查看是否是跨域请求，如果同源，直接发送ajax请求。</li>
<li>如果非同源，说明是跨域请求，浏览器会自动发送一条请求（<strong>预检请求</strong> ），并不会携带数据，服务器接受到请求之后，会返回请求头信息，浏览器查看返回的响应头信息中是否设置了<code>header(&#39;Access-Control-Allow-Origin:请求源域名或者*&#39;);</code></li>
<li>如果没有设置，说明服务器不允许使用cors跨域，那么浏览器不会发送真正的ajax请求。</li>
<li>如果返回的响应头中设置了<code>header(&#39;Access-Control-Allow-Origin:请求源域名或者*&#39;);</code>,浏览器会跟请求头中的<code>Origin: http://www.study.com</code>进行对比，如果满足要求，则发送真正的ajax请求，否则不发送。</li>
<li>结论：<strong>跨域行为是浏览器行为，是浏览器阻止了ajax行为。服务器与服务器之间是不存在跨域的问题的</strong></li>
</ol>
<p>【案例：图灵机器人】</p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/blog/tags/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/" rel="tag"># 网络编程</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/blog/2018/01/01/H5C3/H5C3/" rel="prev" title="H5C3">
      <i class="fa fa-chevron-left"></i> H5C3
    </a></div>
      <div class="post-nav-item">
    <a href="/blog/2018/04/09/ES6/ES601/" rel="next" title="ES6基础">
      ES6基础 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Ajax-前后端的交互技术"><span class="nav-text">Ajax  - 前后端的交互技术</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#服务器的概念"><span class="nav-text">服务器的概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#服务器软件"><span class="nav-text">服务器软件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#web服务器"><span class="nav-text">web服务器</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#客户端"><span class="nav-text">客户端</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#客户端软件"><span class="nav-text">客户端软件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#服务器与客户端的关系"><span class="nav-text">服务器与客户端的关系</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#动态网页与静态网页"><span class="nav-text">动态网页与静态网页</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#网络基础"><span class="nav-text">网络基础</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#ip地址"><span class="nav-text">ip地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#域名"><span class="nav-text">域名</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DNS服务器"><span class="nav-text">DNS服务器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#端口"><span class="nav-text">端口</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#本地hosts"><span class="nav-text">本地hosts</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#搭建HTTP服务器"><span class="nav-text">搭建HTTP服务器</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#phpStudy介绍"><span class="nav-text">phpStudy介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#phpStudy的安装"><span class="nav-text">phpStudy的安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#phpStudy的错误解决"><span class="nav-text">phpStudy的错误解决</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#关闭IIS服务器"><span class="nav-text">关闭IIS服务器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#提示缺少vc9-库文件"><span class="nav-text">提示缺少vc9 库文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#关闭防火墙"><span class="nav-text">关闭防火墙</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#PHP基础"><span class="nav-text">PHP基础</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#php初体验"><span class="nav-text">php初体验</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#变量"><span class="nav-text">变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数据类型"><span class="nav-text">数据类型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#简单数据类型"><span class="nav-text">简单数据类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组"><span class="nav-text">数组</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#语句"><span class="nav-text">语句</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#判断语句"><span class="nav-text">判断语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#循环语句"><span class="nav-text">循环语句</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#表单提交"><span class="nav-text">表单提交</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#http协议"><span class="nav-text">http协议</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#请求与请求报文"><span class="nav-text">请求与请求报文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#响应与响应报文"><span class="nav-text">响应与响应报文</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#AJAX"><span class="nav-text">AJAX</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#同步与异步"><span class="nav-text">同步与异步</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XMLHttpRequest"><span class="nav-text">XMLHttpRequest</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#发送get请求"><span class="nav-text">发送get请求</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#发送post请求"><span class="nav-text">发送post请求</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#获取响应"><span class="nav-text">获取响应</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数据交互"><span class="nav-text">数据交互</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#XML"><span class="nav-text">XML</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON数据"><span class="nav-text">JSON数据</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#php处理json"><span class="nav-text">php处理json</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#JS处理json"><span class="nav-text">JS处理json</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#兼容性处理"><span class="nav-text">兼容性处理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jQuery中的ajax方法"><span class="nav-text">jQuery中的ajax方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#ajax"><span class="nav-text">$.ajax</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他api-了解"><span class="nav-text">其他api(了解)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#接口化开发"><span class="nav-text">接口化开发</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#注册接口"><span class="nav-text">注册接口</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#模板引擎"><span class="nav-text">模板引擎</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#为什么要使用模板引擎"><span class="nav-text">为什么要使用模板引擎</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常见的模板引擎"><span class="nav-text">常见的模板引擎</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#artTemplate的使用"><span class="nav-text">artTemplate的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#artTemplate入门"><span class="nav-text">artTemplate入门</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#artTemplate语法"><span class="nav-text">artTemplate语法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#同源与跨域"><span class="nav-text">同源与跨域</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#同源"><span class="nav-text">同源</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#同源策略的基本概念"><span class="nav-text">同源策略的基本概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#同源策略的目的"><span class="nav-text">同源策略的目的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#同源策略的限制范围"><span class="nav-text">同源策略的限制范围</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域"><span class="nav-text">跨域</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#jsonp"><span class="nav-text">jsonp</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#jsonp演化过程"><span class="nav-text">jsonp演化过程</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#jquery对于jsonp的封装"><span class="nav-text">jquery对于jsonp的封装</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#XMLHttpRequest-2-0"><span class="nav-text">XMLHttpRequest 2.0</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#timeout设置超时"><span class="nav-text">timeout设置超时</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#formData管理表单数据"><span class="nav-text">formData管理表单数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文件上传"><span class="nav-text">文件上传</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#显示文件进度信息"><span class="nav-text">显示文件进度信息</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域资源共享-CORS"><span class="nav-text">跨域资源共享(CORS)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#cors的使用"><span class="nav-text">cors的使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CORS的具体流程（了解）"><span class="nav-text">CORS的具体流程（了解）</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="大春哥"
      src="/blog/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">大春哥</p>
  <div class="site-description" itemprop="description">IT</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">35</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/blog/categories/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/blog/tags/">
          
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">大春哥</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  




  
<script src="/blog/js/local-search.js"></script>













  

  

</body>
</html>
